<template>
  <el-dialog
    :model-value="visible"
    width="680px"
    :title="title"
    @close="handleClose"
    :fullscreen="mobile"
  >
    <el-form :model="form" ref="formRef" label-width="100px">
      <el-form-item prop="name" label="姓名" :rules="[{ required: true, message: '请选择姓名', trigger: 'blur' }]">
        <el-select v-model="form.name">
          <el-option label="小林" value="111"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="type" label="类型" v-if="type === 'pwd'" :rules="[{ required: true, message: '请选择类型', trigger: 'blur' }]">
        <el-radio-group v-model="form.type">
          <el-radio label="1">限时</el-radio>
          <el-radio label="2">自定义</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="有效期" required>
        <el-row>
          <el-col :span="11">
            <el-form-item label-width="0" prop="startDate" :rules="[{ required: true, message: '请选择开始时间', trigger: 'blur'}]">
              <el-date-picker
                v-model="form.startDate"
                :editable="false"
                type="datetime"
                placeholder="请选择开始日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div style="text-align: center;">-</div>
          </el-col>
          <el-col :span="11">
            <el-form-item label-width="0" prop="endDate" :rules="[{ required: true, message: '请选择结束时间', trigger: 'blur'}]">
              <el-date-picker
                v-model="form.endDate"
                type="datetime"
                :editable="false"
                placeholder="请选择结束日期"
                value-format="YYYY-MM-DD HH:mm:ss"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item :prop="item.lockMac" v-for="(item, index) in deviceList" :key="index" style="margin-bottom: 0;">
        <el-checkbox v-model="form[item.lockMac]">{{ item.lockAlias }}</el-checkbox>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="handleOk">
        {{ type === 'pwd' ? '获取密码' : '确认' }}
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup name="PwdOrCard">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'pwd'
  }
})
const deviceList = ref([
  {
    "lockId": 8231811,
    "relationType": "110702",
    "featureValue": "C2F44754CF5F7",
    "electricQuantity": 0,
    "lockAlias": "大门口网吧入口楼梯",
    "lockData": "sRxAxPz6dnKqAY2RFlXOiOjMdkqAETMelaYvpWuH1LfVuRQr8WKIKg3yIy+DXRLQLLF0Rrc5F7PRvPrYCIdH6eI5jMFv6koYtNR7sEp6TxHDJM01SrPPI1zt0aBXPMDBXZFu3NUX6QTV85XHVXRTSXSOIa8zr2Ot+2UnDgwmPtf0ujYBPUa9NaM3LF4fj21oQ349lH3Mgj/yQf3/3CZ+a26ozUqnI7g54QT3X7SqTj2uufeioFQfvtTFTRZ4zhgN3ZflyxW022ur/pvXwvM7VMFAxzcpesu7VDZVWyNwNET6I7aClO+dvgYaX1/PuP31AU4A00aqH+6Mtey8HkQ0iYkxOXL1PIUb3Ru1MZuuLsED0Au/f4GaIzuRtoetxM5LFwZfQNV1T5BhGsVpxnpI/S7PR+mgIC+N3sKq2zkulxrZ+mmpcYydH/yVeIiw6aj/hf7FZLqg2SMGnfiNKRg3Wt3IyynfvNbWhpjpByoNmhey9kTrciRWwCDW02vZhgQJspaoRpDEGQG7e2Y34+wOnB5kvdrgqfYCiGPMITMFio37tHmgI8Wun3JVpr6B/JeRsljmpZRPamaHj64ybKPVMGLAASoOfSBCsqvg0eSNCpaLQvjaUpU=",
    "hasGateway": 1,
    "lockVersion": {
      "groupId": 1,
      "protocolVersion": 3,
      "protocolType": 5,
      "orgId": 1,
      "scene": 2
    },
    "isHotelLock": 0,
    "lockMac": "8B:42:F8:DA:52:95"
  },
  {
    "lockId": 8310551,
    "relationType": "110701",
    "featureValue": "C2F44754CF5F7",
    "electricQuantity": 80,
    "lockAlias": "劲叶公寓0201",
    "lockData": "ICbig5Ouj0Dj/oSvCMkeYGnTsj6nQ8BrBfvSaHHKzAYEJ13ylJDD0XgoMaRL6E+pJwCjmwGKHICv2bEEShpA9zDzipVbDBM2HRg80A5pHDQ5ChuMGEQeQNrJ4O5Yh0Gapqgt8KnUJjOpXLEe3ry3knK5pCNC/8MMhbCpRr/li5OgfIorjGat/vGDocgfmV5gu1W5helNYZpzHRzM6g4/+FuKoPLt/wInpmILWfHJaRPKVVhzW962ZGvvqgfQKIgP8UmbDHl8Q/UkiksLzyp1sTfCEuZy5uMDHN+L6cm8c237kKxcnOj6Gukq/i04QaMg6EJcb4QpLgH0TGfd8ZTFUFuLFZl1ww+U0Xp/rdzWhzdylG5A/fcPtTfJyLowOIkHsxCwNP+qZ4wEEbXFJj9FyqZuK7U0P43A0RresKOlImIwJkwtuujLwnjzeG/ObM4RtHCxqfThYbo/HrzAl7OuIHv0CkWfq6xGF2YWgKwlcRYVql1t5JAwjjPz2mMXUe8rU/UpwlWAqfESmH9Mp10Vxu37WxlU3OLqcx3vUx9zfVlma3VjEKNHvfzHlcsCFScUhr7CJmwE2ao1lhxDfkdN4uyoidYSZ5Tacf2OnoQfGUlywLQERds=",
    "hasGateway": 1,
    "lockVersion": {
      "groupId": 1,
      "protocolVersion": 3,
      "protocolType": 5,
      "orgId": 1,
      "scene": 2
    },
    "isHotelLock": 0,
    "lockMac": "72:C0:B4:04:45:DB"
  },
  {
    "lockId": 8310643,
    "relationType": "110702",
    "featureValue": "C2744254CFDF7",
    "electricQuantity": 100,
    "lockAlias": "大门口电梯入口",
    "lockData": "KY9f8QuzY5e+C0zSSXObspx6zidJUJfUTb6Bhg4cQX1LA0RndTfeQvTilgnhzg1p1Hr+sbN7ZlboFNB2XUaHe1Wt6NCqCNtwvU4mNRy0O6mOYiQ1kkVz7+Xqircmi7drS3iGqeLhJH3R+4KcIuRewjWA6R29JWBrhb5H8wzFqz0cu4DD44JZx1+zLrhRErxoLiEn/GA0HzIP9ASp593aqBiNklRur1gkvivENjmjK9wlECcyo065LM1ESedrux5P/xNez+Is0/1Cof1PjIXBrZPqKAqKdqpdsVXtgxTlFiUD8uzdgSH4AqXxWBh2GXCTanEIRWqwVGIYa+CeLHqOp6Kw7VjN0mMnYKDbFpWiMWt3SFLc7Dh+qCTWwm+MbkrhlcPGHJXc4fSwJOToXtin37hUd/x4GDxfivtZPOnfqzwXjlKounBuACa5GeeFHX8I47Rk7Xd3ReK3ec7U+3oREJQd9ruLhmg4kz0/bth2hWmfT5lR54u/NiTEsuNTKRnJNy/mTjbazMc6bgQYLW/A+SC1XHhif3h5CJRjdYG/K9gDw1XDwySaKHsOj/ETG101KUKe61afNXXN1Nv1QwLXyf/L78yhlQ==",
    "hasGateway": 1,
    "lockVersion": {
      "groupId": 1,
      "protocolVersion": 3,
      "protocolType": 5,
      "orgId": 1,
      "scene": 4
    },
    "isHotelLock": 0,
    "lockMac": "FF:CB:EF:CC:A1:95"
  }
])
const title = computed(() => {
  if (props.type === 'pwd') {
    return '获取密码'
  } else if (props.type === 'card') {
    return '发卡'
  }
})
const mobile = computed(() => useAppStore().device === 'mobile')
const data = reactive({
  form: {
    name: undefined,
    type: '1',
    startDate: '',
    endDate: '',
  }
})
const { form } = toRefs(data)
// 便利门锁 动态表单内容
deviceList.value.forEach(item => {
  form.value[item.lockMac] = false
})
watch(() => props.visible, (val) => {
  if (val) resetForm()
})

// 重置表单
function resetForm() {
  form.value = {
    name: undefined,
    type: '1',
    startDate: '',
    endDate: '',
  }
  proxy.resetForm('formRef')
  deviceList.value.forEach(item => {
    form.value[item.lockMac] = false
  })
}

// 取消
function handleClose() {
  emit('cancel')
}
// 确定
function handleOk() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      emit('ok', form.value)
    }
  })
}
</script>
